<!-- script里面属性export template methods render computed watch-->
<script>
	export default{
		data(){
			return{
				name:'张三',
				color: 'color:red;',
				books: ['Java编程技术基础','Java面向对象编程','JSP动态网站开发']
			}
		},
		template: {
					
		},
		methods: {
			changePerson(){
				this.name = '李四'
				},
			changeColor() {
				this.color = "color:green;"
				}
		},
		render: {
					
		},
		computed: {
			hasBook(){
				return this.books.length > 0 ? '有':'没有'
				}
		},
		watch: {
			name(newValue, oldValue){
				console.log(newValue)
				console.log(oldValue)
				}
		}
	}
</script>

<!--模板语法-->
<template>
	<h1 :style="color">{{name}}</h1>
	<button @click="changePerson()">点击换人</button>
	<button @click="changeColor()">点击换色</button>
	
	<h1>书库中有书吗？</h1>
	<!--
	<h1>{{books.length > 0 ? "有":"没有"}}</h1>
	-->
	<h1>{{hasBook}}</h1>
	
</template>

<style>
	
</style>